<template>
  <a-modal
    :visible="visible"
    :afterClose="hanldeAfterClose"
    @cancel="close"
    @ok="close"
    :width="1200"
    title="查看信息">
    <a-spin :spinning="spinning">
      <a-descriptions bordered :column="2">
        <a-descriptions-item label="项目名称" :span="2">{{ info.UnitName }}</a-descriptions-item>
        <a-descriptions-item label="合同签订人姓名"> {{ info.Name }} </a-descriptions-item>
        <a-descriptions-item label="证件号码"> {{ info.IDCard }}</a-descriptions-item>
        <a-descriptions-item label="房屋信息" :span="2"> {{ info.EAddress }} </a-descriptions-item>
        <a-descriptions-item label="月租金">￥{{ info.RentMonth }}</a-descriptions-item>
        <a-descriptions-item label="保证金(押金)">￥{{ info.Margin }}</a-descriptions-item>
        <a-descriptions-item label="合同签订日期" :span="2">{{ info.SignDate | moment }}</a-descriptions-item>
        <a-descriptions-item label="租赁期限开始时间">{{ info.StartDate | moment }}</a-descriptions-item>
        <a-descriptions-item label="租赁期限结束时间">{{ info.EndDate | moment }}</a-descriptions-item>
        <a-descriptions-item label="低保低收入减免金额">{{
          info.ReductionMoney ? `￥${info.ReductionMoney}` : '/'
        }}</a-descriptions-item>
        <a-descriptions-item label="低保低收入减免执行时间">{{ info.ReductionData | moment }}</a-descriptions-item>
        <a-descriptions-item label="租金减免金额">{{
          info.RentReliefMoney ? `￥${info.RentReliefMoney}` : '/'
        }}</a-descriptions-item>
        <a-descriptions-item label="租金减免执行时间">{{ info.RentReliefDate | moment }}</a-descriptions-item>
        <a-descriptions-item label="租金起始时间">{{ info.RentStartTime | moment }}</a-descriptions-item>
        <a-descriptions-item label="租金截止时间">{{ info.RentEndTime | moment }}</a-descriptions-item>
        <a-descriptions-item label="缴纳租金月数" :span="2">{{
          info.RentPaymentMonth ? `${info.RentPaymentMonth}月` : '/'
        }}</a-descriptions-item>
        <a-descriptions-item label="应收租金" >￥{{ info.RentPayable }}</a-descriptions-item>
        <a-descriptions-item label="收缴金额" >￥{{ info.CollectionMoney }}</a-descriptions-item>
        <a-descriptions-item label="未足额收取原因" >{{ info.NoCollectionReason || '/' }}</a-descriptions-item>
      </a-descriptions>
    </a-spin>
  </a-modal>
</template>

<script>
import { getContractRentAccountDetail } from '@/api/followUpManagement'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    visible (n) {
      if (n) {
        this.fetchData()
      }
    }
  },
  data () {
    return {
      spinning: false,
      info: {}
    }
  },
  methods: {
    fetchData () {
      this.spinning = true
      getContractRentAccountDetail({
        id: this.data.ID
      })
        .then((res) => {
          this.info = res
        })
        .finally(() => {
          this.spinning = false
        })
    },
    close () {
      this.$emit('update:visible', false)
      this.$emit('update:data', {})
      this.info = {}
    },
    hanldeAfterClose () {}
  }
}
</script>
<style lang="less" scoped>
</style>
